import { getQuestionnaireList } from '@/api';
import { questionnaireStatusOptions } from '@/common';
import TableSearch from '@/components/TableSearch';
import { Button, Card, DatePicker, Form, Input, Modal, Radio, Select, Table } from '@aurum/pfe-ui';
import { usePagination } from 'ahooks';
import { useCallback, useEffect, useMemo, useState } from 'react';

const ActionModal = ({ visible, onVisibleChange }) => {
  const handleOk = useCallback(() => {
    onVisibleChange(false);
  }, [onVisibleChange]);

  const handleCancel = useCallback(() => {
    onVisibleChange(false);
  }, [onVisibleChange]);

  const columns = [
    {
      title: 'Module Name',
      dataIndex: 'moduleFullName',
      key: 'moduleFullName',
    },
    {
      title: '待审批节点',
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
  ];

  return (
    <Modal title="批量操作" open={visible} onOk={handleOk} onCancel={handleCancel}>
      <Form initialValues={{ action: 1 }} layout="vertical">
        <Form.Item label="已选择列表">
          <Table data={[{}, {}, {}]} columns={columns} />
        </Form.Item>
        <Form.Item label="审批操作" name="action" rules={[{ required: true, message: '请选择审批操作' }]}>
          <Radio.Group>
            <Radio value={1}>通过</Radio>
            <Radio value={2}>驳回</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="驳回原因" name="username" rules={[{ required: true, message: '请输入驳回原因' }]}>
          <Input.TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
};

const Task = () => {
  const [actionModalVisible, setActionModalVisible] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const { data, loading, pagination, mutate } = usePagination(getQuestionnaireList);

  useEffect(() => {
    mutate([{}]);
  }, [mutate]);

  const handleAction = useCallback(() => {
    setActionModalVisible(true);
  }, []);

  const onSelectChange = (newSelectedRowKeys) => {
    // eslint-disable-next-line no-console
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const searchItems = useMemo(
    () => [
      {
        name: 'date',
        label: '日期',
        render: () => <DatePicker.RangePicker />,
      },
      {
        name: 'name',
        label: '任务名称',
        defaultValue: '',
        render: () => <Input placeholder="请输入" allowClear />,
      },
      {
        name: 'status',
        label: '审批状态',
        defaultValue: '',
        render: () => <Select placeholder="请选择" options={questionnaireStatusOptions} allowClear />,
      },
    ],
    []
  );

  const columns = useMemo(
    () => [
      {
        title: '提交时间',
        dataIndex: 'updateTime',
        key: 'updateTime',
      },
      {
        title: 'Module Name',
        dataIndex: 'moduleName',
        key: 'moduleFullName',
      },
      {
        title: '安全Owner',
        dataIndex: 'owner',
        key: 'owner',
      },
      {
        title: '任务名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '审批状态',
        dataIndex: 'status',
        key: 'status',
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 200,
        render: () => (
          <>
            <Button type="link" size="small" onClick={handleAction}>
              处理
            </Button>
          </>
        ),
      },
    ],
    [handleAction]
  );

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <div className="isc-page-container">
      <TableSearch searchItems={searchItems} />
      <div className="isc-table-card" style={{ marginTop: 16 }}>
        <div className="isc-table-actions">
          <Button type="primary" onClick={handleAction}>
            批量操作
          </Button>
        </div>
        <Card bordered={false}>
          <Table
            rowSelection={rowSelection}
            className="isc-table"
            columns={columns}
            dataSource={data}
            loading={loading}
            pagination={{
              total: pagination.total,
              current: pagination.current,
              pageSize: pagination.pageSize,
              onChange: pagination.onChange,
              showQuickJumper: true,
              showSizeChanger: true,
            }}
            rowKey="id"
            scroll={{
              x: 'max-content',
            }}
          />
        </Card>
      </div>
      <ActionModal visible={actionModalVisible} onVisibleChange={setActionModalVisible} />
    </div>
  );
};

export default Task;
